<template>
  <el-dialog :visible.sync="visible"
             title="冲突数据"
             :close-on-click-modal="false"
             :append-to-body="true"
             :before-close="closeDialog"
             class="user-dialog add-or-updata"
             width="65%"
             :close-on-press-escape="false">
    <el-row v-if="dataLists.user.syncUserList"
            :gutter="15">
      <el-col :span="12">
        <span>同步的用户</span>
        <table-template :tableData='tableData'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists.user.syncUserList'>
        </table-template>
      </el-col>
      <el-col :span="12">
        <span>系统的用户</span>
        <table-template :tableData='tableData'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists.user.sysUserList'>
        </table-template>
      </el-col>
    </el-row>
    <el-row v-if="dataLists.dept.syncDeptList"
            :gutter="15">
      <el-col :span="12">
        <span>同步的部门</span>
        <table-template :tableData='tableData1'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists.dept.syncDeptList'>
          <template slot="syncName-after">
            <el-table-column prop="syncSuperiorName"
                             label="上级部门"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.syncSuperiorName}}{{'('+scope.row.syncSuperiorCode + ')'}}</span>
              </template>
            </el-table-column>
          </template>
        </table-template>
      </el-col>
      <el-col :span="12">
        <span>系统的部门</span>
        <table-template :tableData='tableData1'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists.dept.sysDeptList'>
          <template slot="sysName-after">
            <el-table-column prop="sysSuperiorName"
                             label="上级部门"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.sysSuperiorName}}{{'('+scope.row.sysSuperiorCode + ')'}}</span>
              </template>
            </el-table-column>
          </template>
        </table-template>
      </el-col>
    </el-row>
    <el-row v-if="dataLists.position.syncPositionList"
            :gutter="15">
      <el-col :span="12">
        <span>同步的职位</span>
        <table-template :tableData='tableData2'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists.position.syncPositionList'>
        </table-template>
      </el-col>
      <el-col :span="12">
        <span>系统的职位</span>
        <table-template :tableData='tableData2'
                        :loading='dataListLoading'
                        :fieldManagement='false'
                        :index='true'
                        :dataList='dataLists.position.sysPositionList'>
        </table-template>
      </el-col>
    </el-row>
    <div style="color: red;">
      <div>以上数据与现有系统数据冲突，请选择处理方式</div>
      <div>忽略:不同步冲突的数据</div>
      <div>替换:用同步的数据替换掉系统的数据</div>
    </div>
    <template slot="footer">
      <el-button @click="dataFormSubmitHandle(1)">忽略</el-button>
      <el-button type="primary"
                 @click="dataFormSubmitHandle(2)">替换</el-button>
    </template>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import formValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule, formValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '',
        getDataInfoURL: '',
        addURL: '/system/sysDept', // 添加或修改的接口
        updateURL: '/system/sysDept' // 添加或修改的接口
      },
      visible: false,
      dataLists: {
        position: {},
        dept: {},
        user: {}
      },
      url: '',
      list: {}
    }
  },
  components: {
    tableTemplate
  },
  computed: {
    tableData () { // 同步的用户
      return [
        { label: '工号', width: '100', prop: 'username' },
        { label: '姓名', width: '100', prop: 'realName' },
        { label: '部门', width: '100', prop: 'deptName' },
        { label: '职位', width: '100', prop: 'positionName' }
      ]
    },
    tableData1 () { // 同步的部门
      return [
        { label: '编号', width: '80', prop: 'code' },
        { label: '部门', width: '100', prop: 'name' }
      ]
    },
    tableData2 () {
      return [
        { label: '编号', width: '100', prop: 'code' },
        { label: '职位', width: '100', prop: 'name' }
      ]
    }
  },
  methods: {
    closeDialog () {
      this.dataLists.position = {}
      this.dataLists.dept = {}
      this.dataLists.user = {}
      this.list = {}
      this.url = ''
      this.visible = false
      this.$emit('callBack')
    },
    init (data) {
      this.visible = true
      if (data) {
        if ('syncPositionList' in data) { // 职位
          this.url = 'system/sysPosition/syncDispose'
          this.dataLists.position = data
        } else if ('syncDeptList' in data) { // 部门
          this.url = 'system/sysDept/syncDispose'
          this.dataLists.dept = data
        } else if ('syncUserList' in data) {
          this.url = 'system/sysUser/syncDispose'
          this.dataLists.user = data
        }
        this.list = data
      }
      this.$nextTick(() => {
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function (type) {
      let arr = this.list
      arr.type = type
      this.$http.post(this.url, arr).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.$message.success('操作成功')
          this.closeDialog()
        }
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">
.mod-sys__dept {
  .dept-list {
    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }
}
</style>
